<template>
	<div class="add-goods clearfix">
		<div class="search">
			<!--按关键字分类(商品id，商品编号，商品标题)-->
			<div class="search__list">
				<div class="search__list--title">是否为点分商品</div>
				<el-select  size="small" v-model="params.is_fen" @change="fetchGoodsData">
					<el-option label="一般商品" :value="0"></el-option>
					<el-option label="点分商品" :value="1"></el-option>
				</el-select>
			</div>
			<!--按商品类型来进行分类-->
			<div class="search__list cascader">
				<div class="search__list--title">商品分类</div>
				<s-cascader @getclassify="handleClassify"></s-cascader>
			</div>
			<div class="search__list">
				<div class="search__list--title">关键字</div>
				<el-input placeholder="商品描述" size="small" v-model="params.commodity_name" clearable></el-input>
			</div>
			<div class="search__list">
				<el-button size="small" type="primary" icon="el-icon-search" @click="fetchGoodsData">搜索</el-button>
			</div>
			<div class="search__list search__list-button">
				<el-badge :value="addNumber" style="margin-right: 25px;">
					<el-button size="small" type="primary" @click="showAlreadyAddGoodsModel=true">已添加</el-button>
				</el-badge>
				<el-button size="small" type="primary"  @click="addMultGoods" v-if="batch">批量添加</el-button>
				<el-button size="small" type="danger"  @click="removeMultGoods" v-if="batch">批量移除</el-button>
			</div>
		</div>
		<!--广告商品table-->
		<div class="content-table" v-loading="loading">
			<el-table :data="allGoods" strip height="550" @selection-change="handleSelect">
				<el-table-column type="selection" v-if="batch"></el-table-column>
				<el-table-column label="商品货号" prop="commodity_no"></el-table-column>
				<el-table-column label="商品描述" prop="commodity_name" width="350">
					<template slot-scope="scope">
						<div class="img-desc">
							<img :src="scope.row.mainimg.url"  v-if="scope.row.mainimg" class="img-desc__img"/>
							<span>{{scope.row.commodity_name}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="吊牌价格" prop="price.price">
					<template slot-scope="scope">
						<span v-if="scope.row.price">{{scope.row.price.price}}元</span>
					</template>
				</el-table-column>
				<el-table-column label="卖价" prop="price.price">
					<template slot-scope="scope">
						<span v-if="scope.row.price">{{scope.row.price.sale_price}}元</span>
					</template>
				</el-table-column>
				<el-table-column label="库存" prop="stocks"></el-table-column>
				<el-table-column label="商品状态">
					<template slot-scope="scope">
						<!--__status为自定义属性，用于判断是否已经添加-->
						<el-tag type="danger" v-if="state[scope.row.commodity_id] && state[scope.row.commodity_id].status!==0">已添加</el-tag>
						<el-tag type="success" v-else>等待添加</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="250">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="addGoods(scope.row)">添加</el-button>
						<el-button size="mini" type="danger" @click="removeGoods(scope.row)">移除</el-button>
						<el-button size="mini" @click="showGoodsDetail(scope.row.commodity_id)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-pagination 
			@current-change="handleCurrentChange" 
			layout="prev, pager, next, total" 
			:total="totalNum"
			 class="fr">
		</el-pagination>
		<s-goods-detail-model 
			:id="commodity_id"
			@closeModel="showGoodsDetailModel=false"
			:isShow="showGoodsDetailModel">
		</s-goods-detail-model>
		<s-already-add-goods 
			:isShow="showAlreadyAddGoodsModel" 
			@closeModel="showAlreadyAddGoodsModel=false">
		</s-already-add-goods>
	</div>
</template>

<script>
	import goodsDetail from "../../components/model/goods_detail.vue"
	import alreadyAddGoods from "../../components/model/price_model.vue"
	export default {
		computed: {
			state() {
				return this.$store.state.saveGoods.goodsStatus;
			},
			addNumber() {
				var addNum = 0;
				var list = this.$store.state.saveGoods.goodsStatus;
				for(var item in list) {
					if (list[item].status === 1) {
						addNum++;
					}
				}
				return addNum;
			}
		},
		props: {
			limit: {
				type: Number,
				default: 1
			},
			batch: {
				type: Boolean,
				default: false
			}
		},
		created() {
			this.fetchGoodsData();
		},
		components: {
			"s-goods-detail-model": goodsDetail,
			"s-already-add-goods": alreadyAddGoods
		},
		data() {
			return {
				/*请求参数*/
				params: {
					onShief: 1,							//上架状态，0代表未上架，1代表已上架，空代表全部
					fields: "price,mainimg,bigimgs",	//额外的数据请
					page: 1,							//页数默认为1
					rows: 10,							//一页默认显示为10个
					commodity_name: "",					//商品名(用于搜索)
					provider_id: 1,						//商家类型，1代表天点自营
					is_fen: 0,							//是否为点分商品
					cateids: ""							//从服务器获取到的商品分类的值
				},
				selectGoods: [],						//选中的等待批量上传的商品(没有选中时，会返回一个空数组)
				/*已上架商品*/
				allGoods: null, 			//等待上传商品
				commodity_id: "",			//商品id
				totalNum: 0,				//返回数据总数，用于分页那里显示
				
				/*其他参数*/
				showGoodsDetailModel: false,	 //显示商品详情
				showAlreadyAddGoodsModel: false, //已添加商品弹窗
				loading: true				//加载小圈圈
			}
		},
		methods: {
			//====================================数据获取(与后台交互)===============================//
			/*向后台请求(待上架)商品数据*/
			fetchGoodsData() {
				var url = `${this.url}/commodity/item_get_list.action`;//请求url
				var params = this.params;
				this.loading = true;
				this.$http.get(url,{ params }).then((res, err) => {
					if( res.data.success ) {
						this.loading = false;
						this.allGoods = res.data.result.rows;
						//获取商品状态(是否已经添加)
						this.allGoods.forEach((val,index)=>{
							if (this.$store.state.saveGoods.goodsStatus[val.commodity_id] === undefined) {
								this.$store.commit({
									type: "saveGoods/set",
									status: 0,
									commodity_id: val.commodity_id,
									commodity_no: val.commodity_no,
									commodity_name: val.commodity_name
								});
							}
						});
						this.totalNum = res.data.result.total;//获取分页个数
					}else {
						this.loading = false;
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			//添加单个商品
			addGoods(val) {
				if (this.$store.state.saveGoods.goodsStatus[val.commodity_id].status === 1) {
					this.$message({
						message: "商品已经添加，正在等待提交",
						type: "warning"
					});
				}else if(this.limit <= this.$store.state.saveGoods.addNum) {
					this.$message({
						message: `商品数量超过添加限制，限制只能添加${this.limit}个商品`,
						type: "warning"
					});
				}else {
					this.$store.commit({
						type: "saveGoods/set",
						commodity_id: val.commodity_id,
						commodity_no: val.commodity_no,
						status: 1,
						commodity_name: val.commodity_name
					});
				}
			},
			//添加多个商品
			addMultGoods() {
				if ( this.selectGoods.length > 0 ) {
					let extraGoods = 0;
					this.selectGoods.forEach((val)=> {
						if (this.$store.state.saveGoods.goodsStatus[val.commodity_id].status !== 1) {
							extraGoods++;
						}
					});
					if(this.limit < this.$store.state.saveGoods.addNum + extraGoods) {
						this.$message({
							message: `商品数量超过添加限制，限制只能添加${this.limit}个商品`,
							type: "warning"
						});
					}else {
						this.selectGoods.forEach((val)=> {
							if (this.$store.state.saveGoods.goodsStatus[val.commodity_id].status !== 1) {
								this.$store.commit({
									type: "saveGoods/set",
									commodity_id: val.commodity_id,
									commodity_no: val.commodity_no,
									status: 1,
									commodity_name: val.commodity_name
								});		
							}
						});						
					}
				}else {
					this.$message({
						message: "请至少选择需一个要上传的商品",
						type: "warning"
					});
				}
			},
			//移除一个商品
			removeGoods(val) {
				if (this.$store.state.saveGoods.goodsStatus[val.commodity_id].status === 0) {
					this.$message({
						message: "商品正在等待添加",
						type: "warning"
					});
				}else {
					this.$store.commit({
						type: "saveGoods/set",
						commodity_id: val.commodity_id,
						commodity_no: val.commodity_no,
						status: 0,
						commodity_name: val.commodity_name
					});
				}
			},
			//移除多个商品
			removeMultGoods() {
				if ( this.selectGoods.length > 0 ) {
					this.selectGoods.forEach((val)=> {
						if (this.$store.state.saveGoods.goodsStatus[val.commodity_id].status !== 0) {
							this.$store.commit({
								type: "saveGoods/set",
								commodity_id: val.commodity_id,
								commodity_no: val.commodity_no,
								status: 0,
								commodity_name: val.commodity_name
							});		
						}
					});
				}else {
					this.$message({
						message: "请至少选择需一个要移除的商品",
						type: "warning"
					});
				}
			},
			//选择多个时触发这个函数
			handleSelect(row) {
				this.selectGoods = row;
			},
			//================================获取不同的查询条件==================================//
			/*获取到商品分类的值*/
			handleClassify(val) {
				this.params.cateids = val.join(",");
				this.fetchGoodsData();
			},
			//====================================其他请求=======================================//
			/*查看商品详情*/
			showGoodsDetail(id) {
				this.showGoodsDetailModel = true;
				this.commodity_id = id;
			},
			/*翻页时候向后台发送请求，page代表第几页*/
			handleCurrentChange(pages) {
				this.params.page = pages;
				this.fetchGoodsData();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-goods {
		width: 100%;
	}
</style>